<!--
 * @Description: 真警情列表
 * @Author: yangxq
 * @Date: 2019-09-10 19:46:10
 * @LastEditTime: 2019-09-12 12:04:40
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="alarmDetail_wrap"
       :class="isFull ? ' map-fullHeight' : ''">
    <div class="topNavs">
      <van-nav-bar title="真警提醒"
                   left-arrow
                   @click-left="$router.go(-1)" />
    </div>
    <h3 class="bigTitle top-bigTitle">火灾位置</h3>
    <baidu-map class="map-container"
               :center="center"
               :zoom="zoom">
      <bm-view class="bm-view"></bm-view>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-marker :position="position"
                 animation="BMAP_ANIMATION_BOUNCE"
                 @dragend="dragend"></bm-marker>
      <bm-control anchor="BMAP_ANCHOR_BOTTOM_RIGHT">
        <div @click="fullScreenFn"
             class="fullScreen">
          <img src="../../assets/img/fullScreen.png"
               alt />
        </div>
      </bm-control>
    </baidu-map>
    <div class="alarm-list"
         style="magin-top:0">
      <div class="item">
        <div class="left-block">
          <strong>地址详情</strong>
          <div class="leftCon">{{infoDate.deviceAddress}}</div>
        </div>
      </div>

      <div class="item">
        <div class="left-block">
          <strong>家庭管理员</strong>
          <div class="leftCon">{{infoDate.safeUserName}} {{infoDate.safeUserPhone}} <a class="phone"
               :href="'tel:'+infoDate.safeUserPhone"
               v-if="infoDate.safeUserPhone">拨号</a></div>
        </div>
      </div>
      <div class="item">
        <div class="left-block">
          <strong>设备类型</strong>
          <div class="leftCon">{{infoDate.deviceTypeName}}</div>
        </div>
      </div>

      <div class="item">
        <div class="left-block">
          <strong>报警时间</strong>
          <div class="leftCon">{{infoDate.alarmTime}}</div>
        </div>
      </div>
    </div>
    <div class="splitLine"></div>
    <h3 class="bigTitle">复核信息</h3>
    <div class="alarm-list"
         style="magin-top:0">

      <div class="item">
        <div class="left-block">
          <strong>复核人</strong>
          <div class="leftCon">{{infoDate.reviewUserName}} {{infoDate.reviewUserTel}} <a class="phone"
               :href="'tel:'+infoDate.reviewUserTel"
               v-if="infoDate.reviewUserTel">拨号</a></div>
        </div>
      </div>
      <div class="
               item">
        <div class="left-block">
          <strong>复核时间</strong>
          <div class="leftCon">{{infoDate.reviewTime}}</div>
        </div>
      </div>

      <div class="item">
        <div class="left-block">
          <strong>复核描述</strong>
          <div class="leftCon">复核描述</div>
        </div>
      </div>
      <div class="item">
        <div class="left-block">
          <strong>现场照片</strong>
          <div class="leftCon">
            <ul class="imgList">
              <li v-for="(item,index) in imgList"
                  :key="index">
                <img :src="item">
              </li>

            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "alramList",
  data () {
    return {

      alarmId: "",
      infoDate: "",
      imgList: [],
      center: { lng: '', lat: '' },
      zoom: 16,
      position: { lng: '', lat: '' },
      isFull: false
    };
  },
  mounted () {
    this.alarmId = this.$route.params.id;
    this.getAlarmInfoDetail();
  },
  methods: {
    //真警详情
    getAlarmInfoDetail () {
      let params = {
        alarmId: this.alarmId
      }
      this.$http.post("getAlarmInfoDetail", params).then((res) => {
        if (res.data.code == "success") {
          this.infoDate = res.data.data;
          this.center.lng = this.infoDate.unitPointX;
          this.center.lat = this.infoDate.unitPointY;
          this.position.lng = this.infoDate.unitPointX;
          this.position.lat = this.infoDate.unitPointY;
          this.imgList = this.infoDate.listAttach;


        }
      })
    },
    dragend () { },
    markersset () { },
    fullScreenFn () {
      this.isFull = !this.isFull;
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/common.scss";
.alarmDetail_wrap {
  width: 100%;
  height: 100%;
  .bigTitle {
    width: 88%;
    margin: 0 auto;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 0.3rem 0 0.3rem 0;
    position: relative;
    &:after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #d3d5dc;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .alarm-list {
    width: 88%;
    margin: 0 auto;
    .item {
      position: relative;
      font-size: 0.42rem;
      padding: 0.2rem;
      .phone {
        padding: 0.02rem 0.2rem;
        color: #1e88ff;
        border: 1px solid #1e88ff;
        border-radius: 10px;
        font-size: 0.33rem;
      }
      .left-block {
        display: flex;
        padding: 5px 0;
        strong {
          margin-right: 10px;
          width: 2.15rem;
          display: inline-block;
          text-align: justify;
          text-align-last: justify;
          font-weight: 540;
          flex-shrink: 0;
        }
        .leftCon {
          color: #868686;
        }
      }
      .imgList {
        li {
          float: left;
          width: 1.2rem;
          margin-right: 10px;
          img {
            width: 100%;
            height: 1.32rem;
          }
        }
      }
      &:after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #dcdee2;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
  }
  .bm-view {
    width: 100%;
    height: 100%;
  }

  .anchorBL img {
    display: none;
  }
  .map-container {
    position: relative;
    width: 100%;
    height: 6.5rem;
  }

  .fullScreen {
    width: 1.2rem;
    height: 1.2rem;
    background: $theme-color;
    border: 0;
    border-radius: 100%;
    text-align: center;
    margin-right: 0.2rem;
    margin-bottom: 0.6rem;
    img {
      width: 50%;
      margin-top: 25%;
    }
  }
  &.map-fullHeight {
    .map-container {
      height: calc(100% - 1.37rem);
    }
    .top-bigTitle {
      display: none;
    }
  }
}
</style>